<template>
  <div>
    <!-- 背景图 -->
    <div class="back">
      <img class="backimg" src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="" />
    </div>

    <div class="back1">
      <img class="backimg1" src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="" />
      <div class="backtext">严选好物 用心生活</div>
    </div>

    <!-- 轮播图 -->
    <div class="header">
      <van-swipe class="swipe" :loop="false" :width="90">
        <van-swipe-item class="swipeitem" v-for="item in BannerList" :key="item.id">
          <div class="itemtop">
            <img class="itemimg" :src="item[0].picUrl" alt="" />
            <div class="name">{{ item[0].mainTitle }}</div>
            <div class="des">{{ item[0].viceTitle }}</div>
          </div>

          <div class="itembottom">
            <img class="itemimg" :src="item[1].picUrl" alt="" />
            <div class="name">{{ item[1].mainTitle }}</div>
            <div class="des">{{ item[1].viceTitle }}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 瀑布流  -->
    <div class="waterbox">
      <div v-masonry fit-width="true" transition-duration="0.3s" item-selector=".waterFallItem" class="waterFall">
        <div v-masonry-tile class="waterFallItem" v-for="item in WaterFallList" :key="item.id">
          <div class="fallItem">
            <div style="width: 170px">
              <img class="itemimg1" :src="item.picUrl" alt="" />
            </div>
            <div class="itembottom1">
              <div class="describe">{{ item.title }}</div>
              <div class="user">
                <div class="userInfo">
                  <img :src="item.avatar" style="width: 24px; height: 24px; border-radius: 50%" />
                  <span class="userName">{{ item.nickname }}</span>
                </div>
                <div class="browse">{{ item.readCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <TabBar></TabBar>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
// import a from './url.js'
export default defineComponent({
  name: 'Buy'
})
</script>

<script lang="ts" setup>
import { useBannerListStore } from '@/stores/Banner'
import { storeToRefs } from 'pinia'
const BannerListData = useBannerListStore()
const { BannerList } = storeToRefs(BannerListData)
const { WaterFallList } = storeToRefs(BannerListData)

const scrollBottom = () => {
  //表示页面被卷起的高度--->滚轮滚动的高度
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  //clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度
  const clientHeight = document.documentElement.clientHeight
  //scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding
  // <如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）
  //-2:得减去一点高度才可以触底事件
  const scrollHeight = document.documentElement.scrollHeight
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    const length = WaterFallList.value.length
    if (length < 100) {
      BannerListData.getWaterFallList(page.value, size.value)
    }
  }
}
// 即将卸载时，清除触底事件
onBeforeUnmount(() => {
  window.removeEventListener('scroll', scrollBottom)
})

const page = ref(1)
const size = ref(3)

onMounted(() => {
  BannerListData.getBannerList()
  BannerListData.getWaterFallList(page, size)
  window.addEventListener('scroll', scrollBottom)
})
</script>

<style lang="less" scoped>
.header {
  width: 355px;
  // height: 270px;
  margin: 0 10px;
  border-radius: 10px;
  position: absolute;
  top: 80px;
  background-color: white;
  // overflow: hidden;
}

.swipe {
  width: 100%;
  height: 280px;

  // position: relative;

  :deep(.van-swipe__indicator) {
    background-color: #ccc;
    border-radius: 0;
    width: 20px;
    height: 2px;
    margin: 0;
  }

  :deep(.van-swipe__indicators) {
    // margin: ;
    width: 120px;
    height: 2px;
    position: absolute;
    // z-index: 99;
    left: 50%;
    transform: translate(-50%);
    bottom: 10px;
  }
}

.back {
  width: 100%;
  height: 259px;
}

.backimg {
  width: 100%;
  height: 259px;
}
.backtext {
  font-size: 16px;
  color: white;
  margin-bottom: 4px;
}

.back1 {
  display: flex;
  align-items: flex-end;
  height: 35px;
  position: absolute;
  top: 35px;
  margin-left: 10px;
}

.backimg1 {
  width: 65px;
  height: 35px;
}

.swipeitem {
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.itemtop {
  margin-top: 10px;
}

.itemtop,
.itembottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  height: 150px;
}
.itembottom {
  height: 150px;
}

.itemimg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.name {
  width: 90px;
  text-align: center;
  font-size: 15px;
}

.des {
  width: 90px;
  text-align: center;
  font-size: 10px;
  color: #ccc;
}
.img1 {
  width: 170px;
  height: 170px;
}
.waterbox {
  position: absolute;
  top: 380px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
// .waterFall {
//   // width: 100%;
//   margin: 0 auto;
//   // position: absolute;
//   // top: 20px;
// }
.waterFall .waterFallItem {
  width: 170px;
  border-radius: 10px;
  margin: 0 8px 15px 0;
  background-color: white;
}
.waterFall .waterFallItem .fallItem {
  width: 170px;
}
.waterFall .waterFallItem .fallItem .itemimg1 {
  width: 170px;
  border-radius: 5px;
}
.waterFall .waterFallItem .fallItem .itembottom1 {
  width: 170px;
}
.waterFall .waterFallItem .fallItem .itembottom1 .describe {
  width: 170px;
  font-size: 16px;
  margin-bottom: 10px;
}
.waterFall .waterFallItem .fallItem .itembottom1 .user {
  width: 170px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.waterFall .waterFallItem .fallItem .itembottom1 .user .userInfo {
  width: 170px;
  height: 35px;
}
.waterFall .waterFallItem .fallItem .itembottom1 .user .userInfo .userName {
  width: 44px;
  height: 24px;
  font-size: 14px;
}
.waterFall .waterFallItem .fallItem .itembottom1 .user .browse {
  width: 50px;
  height: 35px;
  font-size: 12px;
  line-height: 35px;
  text-align: center;
}
</style>
